import React from 'react';
import { Form, Card, Button } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { useRequest, defaultFormatResult } from '@/hooks';
import { history } from 'umi'
import { TEMPLATE_TITLE } from '@/pages/Recruitment/Setting/constants';
import { BraftTemplate } from '@/pages/Recruitment/Setting/containers';
import { getNoticeTemplate } from '@/pages/Recruitment/Setting/service';
import LabelValue from '@/components/LabelValue';
import authHelper from '@/utils/auth/helper';
import styles from './index.less';

const { checkCode } = authHelper;

/**
 *  各类模板详情
 *  目前此页面只要录用信息使用，权限暂时写死
 */
const NoticeTemplateDetail = ({ location }) => {
    const { query } = location;
    const { id, type } = query;
    const { data, loading } = useRequest(() => getNoticeTemplate(id), {
        refreshDeps: [id],
        ...defaultFormatResult
    });

    return (
        <PageHeaderWrapper>
            <Card
                title={`${TEMPLATE_TITLE[type]}模板详情`}
                bordered={false}
                loading={loading}
                extra={
                    checkCode('office:recruitment:setting:employed:update') && (
                        <Button
                            type="primary"
                            onClick={() => {
                            history.push({
                                pathname: '/office/personnelManagement/recruitment/setting/notice/employInfoEdit',
                                query: { id, type }
                            });
                        }}
                    >
                            编辑
                        </Button>)
                }
            >
                <Form className={styles.noticeTemplateDetailWrap}>
                    <LabelValue
                        label="模板名称"
                        value={data?.templateName}
                        align="top"
                        labelClassName={styles.labelClass}
                        valueClassName={styles.valueClass}
                    />
                    <LabelValue
                        align="top"
                        labelClassName={styles.labelClass}
                        valueClassName={styles.valueClass}
                        label="适用行政机构"
                        value={data?.isDefault === 1 ? '全集团' : data?.organizationNames?.replace(/,/g, '、')}
                    />
                    <LabelValue
                        align="top"
                        labelClassName={styles.labelClass}
                        valueClassName={styles.valueClass}
                        label="内容"
                        value={() => (
                            <div style={{ position: 'relative' }}>
                                <BraftTemplate
                                    readOnly
                                    controls={[]}
                                    type={type}
                                    initialValue={data?.templateContent || ''}
                                    contentStyle={{ height: 'auto', minHeight: 250 }}
                                />
                                <div style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, zIndex: 999 }}></div>
                            </div>
                        )}
                    />
                </Form>
            </Card>
        </PageHeaderWrapper>
    );
};

export default React.memo(NoticeTemplateDetail);
